<template>
  <div class="question-area">
    <span class="number">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <span class="is-required" v-if="question.must"> * </span>
  </div>
  <div class="answer-area">
    <el-input
      v-model="answer"
      placeholder="请输入内容"
      v-if="question.row === '1'"
    ></el-input>
    <el-input
      type="textarea"
      :autosize="true"
      placeholder="请输入内容"
      v-model="answer"
      v-else
    >
    </el-input>
  </div>
</template>

<script>
  export default {
    props: {
      question: Object,
      number: Number,
      changeAnswers: Function
    },
    data() {
      return {
        answer: null,
      };
    },
    watch: {
      // 监听答案的变化
      // 并改变原来问卷中的答案部分
      answer: function(newVal) {
        this.changeAnswers(this.number, newVal)
      }
    }
  };
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.is-required {
  background-size: 100%;
  vertical-align: -2px;
  font-size: 18px;
  color: red;
}

.answer-area {
  font-size: 14px;
}
</style>